<template>
	<view class="body">
		<view class="top-container">
			<uni-list :border="false">
				<uni-list-item :border="false" title="生产订单号" :rightText="header.moBillNo" />
				<uni-list-item :border="false" title="汇报人" :rightText="userName" />
				<uni-list-item :border="false" title="工序号" :rightText="operNo" />
				<!-- <uni-list-item :border="false" title="控制码" :rightText="operpData.control" /> -->
				<uni-list-item :border="false" title="车间" :rightText="operpData.departName" />
				<uni-list-item :border="false" title="物料名称" :rightText="header.materialName" />
				<uni-list-item :border="false" title="件号"  :rightText="header.specification" />
				<uni-list-item :border="false" title="工单数量" :rightText="String(header.qty)" />
				<uni-list-item :border="false" title="已汇报数量" :rightText="String(reportSumCount)" />
			</uni-list>
	 
			<view class="panel">
				<view class="panel_content">
					<view class="panel_content_row">
						<view class="panel_content_row_item">
							<view class="panel_content_row_item_title">合格数量：</view>
							<view class="panel_content_row_item_value_input">
								<input v-model="quaQty" type="number" placeholder="请输入合格数量"  @input="handleQuality()"/>				
							</view>
							
						</view>
					</view>
				</view>
			</view>
			
			<view class="panel">
				<view class="panel_content">
					<view class="panel_content_row">
						<view class="panel_content_row_item">
							<view class="panel_content_row_item_title">工废数量：</view>
							<view class="panel_content_row_item_value_input">
								<input v-model="processFailQty" type="number" placeholder="请输入工废数量"  @input="handleFailQty()"
								  />
							</view>
						</view>
						
					</view>
				</view>
			</view>
			
			
			<view class="panel">
				<view class="panel_content">
					<view class="panel_content_row">
						<view class="panel_content_row_item">
							<view class="panel_content_row_item_title">料废数量：</view>
							<view class="panel_content_row_item_value_input">
								<input v-model="materialFailQty" type="number" placeholder="请输入料废数量" @input="handleMaterialFailQty()"
								  />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="panel">
				<view class="panel_content">
					<view class="panel_content_row">
						<view class="panel_content_row_item">
							<view class="panel_content_row_item_title">完工数量：</view>
							<view class="panel_content_row_item_value_input">
								<input v-model="endQty" type="number" placeholder="完工数量" class="editable-input"  disabled/>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="panel">
				<view class="panel_content">
					<view class="panel_content_row">
						<view class="panel_content_row_item">
							<view class="panel_content_row_item_title">工时(分钟)：</view>
							<view class="panel_content_row_item_value_input">
								<input v-model="workTime" type="number" placeholder="请输入工时(分钟)" class="editable-input" />
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="panel">
				<view class="panel_content">
					<view class="panel_content_row">
						<view class="panel_content_row_item">
							<view class="panel_content_row_item_title">操作工：</view>
							<view class="panel_content_row_item_value_input">
								<input v-model="operator" type="text" placeholder="请输入操作工" class="editable-input" />
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="panel">
			<!--  底部按钮  -->
			<view class="footerPanelgx">
				<view class="footerPanelgx_body">
					<button v-if="departName === '机加车间' || departName === '包装车间'" @click="pickScan" class="footerBtngx scan" type="primary"><i
							class="iconfont icon-saomiao btn_icon"></i>扫码
					</button>
					<button @click="saveReport" class="footerBtngx save" ><i
							class="iconfont icon-duihao btn_icon" ></i>保存工序汇报
					</button>
					
				</view>
			</view>
			</view>
		</view>
		<!-- 全局遮罩：在 butClick 为 true 时显示，阻止所有交互，显示转圈提示 -->
		<view v-if="butClick" class="global-mask">
		  <view class="loader-box">
		    <view class="loader"></view>
		    <view class="loader-text">审核中，请稍候...</view>
		  </view>
		</view>
		<!-- 获取托盘信息 -->
		<GetTray ref="trayRef" @success="getTraySuccess"></GetTray>
		<!-- 扫描托盘 -->
		<tray-popup ref="trayPopupRef" @success="trayScanningScuess"></tray-popup>
	</view>
</template>

<script>
	import uniTransition from 'uni_modules/uni-transition/components/uni-transition/uni-transition.vue';
	import uniEmptyInfo from "../../vBase/components/uni-empty-info/uni-empty-info.vue"
	import trayPopup from '../../components/popup/trayPopup.vue'
	import GetTray from "../pop/get_tray.vue"
	import {
		getTrayPlan,
		getProPlanisDetail,
		getOptrptisDetail,
		saveReportJijia

	} from '@/utils/api.js'


	export default {
		components: {
			GetTray,
			uniEmptyInfo,
			trayPopup
		},
		data() {
			return {
				billNo: '',
				trayCount:0,//托盘数量
				quaQty: '',//合格数量
				workTime : '',//工时
				processFailQty : '',//工废数量
				materialFailQty : '',//料废数量
				endQty : '',//完工数量
				operNo:'',//工序计划单号
				operator:'',//操作工
				loading: true,
				header: {},
				trayData:{},
				reportSumCount:0,
				departName:'',
				trayNo : '',
				butClick:false,
				userName : '',//登录的用户
				operpData: {}//工序计划详情
			}
		},
		methods: {
			//扫码成功后返回
			trayScanningScuess(e){
				let _this = this;
				getTrayPlan({billNo : e,operBillNo : this.header.billNo,operpData :this.operpData }).then(result => {
					if (result.statusCode == 200){
						this.trayData = result.data.data ?? {}
						this.endQty = this.trayData.optCount
						this.trayCount = this.trayData.fqty
						this.quaQty = this.trayData.optCount
					}
				})
			},
			//扫码获取托盘信息
			pickScan(){
				this.$refs.trayPopupRef.open()
			
			},
			//调整完工数量
			changeEndqty(){
				// this.quaQty =  Number(this.trayCount) - Number(this.processFailQty) - Number(this.materialFailQty)
				// if (Number(this.quaQty) < 0){
				// 	uni.showModal({
				// 		title:'提示',
				// 		content:'废料数量不能大于合格数量',
				// 		showCancel: false
				// 	})
				// 	this.processFailQty= 0;
				// 	this.materialFailQty = 0;
				// 	this.quaQty = this.trayCount;
				// 		return;
				// }
				this.endQty = Number(this.quaQty)+ Number(this.processFailQty) + Number(this.materialFailQty)
			},
			
			//填写料废数量
			handleMaterialFailQty(){
				const v = this.materialFailQty
				const zero = "(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')"
				let final = 0
				if (!v) {
				  final = 0
				} else {
				  final = v.toString().replace(zero, (v) => {
					return 0
				  })
						
				  if (final.split('')[0] * 1 === 0) {
					final = final.slice(1) - 0 || 0
				  }
				}
				this.$nextTick(() => {
				 this.materialFailQty = final.toString() || '0'
				 this.changeEndqty()
				})
					
			
			},
			//填写工费数量
			handleFailQty(){
				const v = this.processFailQty
				const zero = "(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')"
				let final = 0
				if (!v) {
				  final = 0
				} else {
				  final = v.toString().replace(zero, (v) => {
					return 0
				  })
						
				  if (final.split('')[0] * 1 === 0) {
					final = final.slice(1) - 0 || 0
				  }
				}
				this.$nextTick(() => {
				 this.processFailQty = final.toString() || '0'
				 this.changeEndqty()
				})
					
			
			},
			//填写合格数量
			handleQuality(){
				const v = this.quaQty
				const zero = "(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')"
				let final = 0
				if (!v) {
				  final = 0
				} else {
				  final = v.toString().replace(zero, (v) => {
					return 0
				  })
						
				  if (final.split('')[0] * 1 === 0) {
					final = final.slice(1) - 0 || 0
				  }
				}
				this.$nextTick(() => {
				 this.quaQty = final.toString() || '0'
				 this.changeEndqty()
				})
					
			
			},
			saveReport() {
				//机加车间和包装车间的需要扫描托盘
				// if(this.departName === '机加车间' || this.departName === '包装车间'){
				// 	if (Object.keys(this.trayData).length === 0){
				// 		uni.showModal({
				// 			title:'提示',
				// 			content:'请扫描托盘汇报',
				// 			showCancel: false
				// 		})
				// 			return;
				// 	}
				// }
				if(this.endQty == 0){
					uni.showModal({
						title:'提示',
						content:'请确认完工数量',
						showCancel: false
					})
						return;
				}
				
			
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确认保存汇报单',
					success(res) {
						if (res.confirm) {
							
							_this.butClick = true; // 禁止其他操作
							uni.showLoading({
							    title: "审核中...",
							    mask: true
							});
							saveReportJijia({
								operpData: _this.operpData,
								header: _this.header,
								workTime:_this.workTime,
								processFailQty:_this.processFailQty,
								materialFailQty:_this.materialFailQty,
								endQty:_this.endQty,
								quaQty:_this.quaQty,
								operator : _this.operator,
								trayData:_this.trayData
							}).then(result => {
								
								if (result.data.data) {
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									})
								}
								uni.hideLoading();
								_this.butClick = false;
								//保存成功后回到列表页
								setTimeout(() => {
									uni.navigateBack({
										delta: 2,
										// success() {
										// 	uni.$emit('update', {
										// 		msg: '页面刷新'
										// 	});
										// }
									})
								}, 2000)


							}).catch(err => {
		                    // 接口异常恢复按钮和 loading
		                    uni.hideLoading();
		                    self.butClick = false;
		
		                    uni.showToast({
		                        title: "接口异常，请重新保存",
		                        icon: "error"
		                    });
		
		                    
		                });

						}
					}
				})
			},
			// 获取详情数据
			initData() {
				getProPlanisDetail({
					billNo: this.billNo,
					operNo : this.operNo //工序
				}).then(res => {
					if (res.statusCode === 200) {
						this.header = res.data.data.data;
						this.reportSumCount = res.data.data.reportCount;
						const detail = res.data.data.dataList;
						detail.forEach(item => {
							if (item.operNo == this.operNo){
								this.operpData = item
								this.departName = item.departName
							}
						})
						this.trayScanningScuess(this.trayNo)
					}
				}).catch(err => {
					// 错误处理保持不变...
				});
				this.userName = uni.getStorageSync('userName')
			},
		},
		watch: {
			// userInfo() {
			// 	console.log(this.userInfo())
			// }
		},
		mounted() {
			let self = this;
			uni.$on('update', function(data) {
				self.initData()
			})
		},
		onLoad(options) {
			try {

				this.billNo = options.billNo
				this.operNo = options.operNo
				this.trayNo = options.trayNo
				this.initData()
			
			} catch (e) {
				console.error("页面加载错误:", e)
				uni.showToast({
					title: "加载失败",
					icon: "none"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../static/css/common";
/* 调整列表项左右文字大小 */
::v-deep .uni-list-item__content-title {
    font-size: 22px !important;  /* 左侧标题字体大小 */
	padding-left: 5px;
}

::v-deep .uni-list-item__extra-text {
    font-size: 22px !important;  /* 右侧内容字体大小 */
	padding-right: 5px;
	 color: #333;
}

/* 调整行间距 */
::v-deep .uni-list-item__container {
    padding: 3px 0 !important;   /* 减小上下内边距 */
    min-height: 10px !important; /* 减小最小高度 */
}

/* 调整标题样式 */
.panel_content_row_item_title {
    font-size: 20px !important;  /* 调大字体 */
    color: #000000 !important;   /* 纯黑字体 */
    flex-shrink: 0;             /* 防止压缩 */
}
 
/* 调整输入框容器 */
.panel_content_row_item_value_input {
    flex: 1;                    /* 占据剩余空间 */
    margin-left: 10px;          /* 增加左右间距 */
}
 
/* 调整输入框本身 */
.panel_content_row_item_value_input input {
    height: 45px !important;    /* 调高输入框 */
    font-size: 30px !important; /* 同步调大输入文字 */
    // padding: 1px 12px !important;
    border: 1px solid #ddd;     /* 增加边框更清晰 */
    border-radius: 4px;
}
 
/* 调整行间距 */
.panel_content_row {
    padding: 1px 0 !important;  /* 减小上下内边距 */
}
// 底部按钮
.footerPanelgx {
  height: 90px;

  .footerPanelgx_body {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;

    .footerBtngx {
      height: 55px;
      margin: 0 5px;
      display: flex;
      line-height: 1;
      font-size: 16px;
      border-radius: 4px;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 5px rgba(201, 201, 201, 0.5);
      color: #fff;

      &.save {
        background-color: $uni-color-success;
        width: 150px;
        flex-shrink: 0;
      }

      &.scan {
        background: $primary;
		width: 150px;
		flex-shrink: 0;
      }
    }

    .btn_icon {
      margin-right: 8px;
    }
  }
}
/* 全局遮罩 (覆盖整个页面，挡住所有点击) */
	.global-mask {
	  position: fixed;
	  left: 0;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 9999;
	  background: rgba(0,0,0,0.45);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	
	/* loader 容器 */
	.loader-box {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 20px 30px;
	  background: rgba(255,255,255,0.95);
	  border-radius: 8px;
	}
	
	/* CSS 简易转圈 */
	.loader {
	  width: 44px;
	  height: 44px;
	  border-radius: 50%;
	  border: 4px solid rgba(0,0,0,0.1);
	  border-top-color: #ffffff;
	  border-right-color: #ffffff;
	  animation: spin 1s linear infinite;
	  margin-bottom: 8px;
	}
	
	.loader-text {
	  font-size: 14px;
	  color: #333;
	}
	
	/* 动画 */
	@keyframes spin {
	  from { transform: rotate(0deg); }
	  to { transform: rotate(360deg); }
	}
</style>
